<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        width:700px;
        height:300px;
        border-collapse: collapse;
        border:1px solid black;
    }
    td{border:1px solid black;}
    *{margin:0;padding: 0;}
    </style>
</head>
<body>

    <script>
    // var i=1;
    // while(i<=9){
    //      var j=1;
    //      while(j<=i){
    //        result=i*j
    //       document.write('<td>j+"*"+i+"="+result+"&nbsp;&nbsp;&nbsp;&nbsp;"</td>');
    //       j++;
    //      }
    //      document.write("<br>");
    //     i++;
    // }

document.write("<table>");
    for(var i=1;i<=9;i++){
    // document.write("<tr>")
    if(i%2==0){
        document.write('<tr style="background:skyblue;">');
    }
    else{
        document.write('<tr style="background:red;">');
    }
        for(var j=1;j<=i;j++){
            result=i*j;
         document.write("<td>"+i+"*"+j+"="+result+"</td>")
        }
    document.write("</tr>")
    }
document.write("</table>");
    </script>
</body>
</html>